<template>
  <div class="echart-view" ref="chartRef"></div>
</template>

<script lang="ts" setup>
import { onDeactivated, onMounted, PropType, ref, watch } from "vue";
import * as echarts from "echarts/core";

const props = defineProps({
  options: { type: Object as PropType<any>, required: true },
  theme: { type: String, default: "default" },
});
const chartRef = ref<HTMLDivElement>();

const chartView = ref<echarts.ECharts>();

const onWindowResize = () => {
  chartView.value?.resize();
};

watch(
  () => props.options,
  () => {
    chartView.value?.setOption(props.options, false);
  }
);

onMounted(() => {
  window.addEventListener("resize", onWindowResize, false);
  chartView.value = echarts.init(chartRef.value, props.theme);
  chartView.value?.setOption(props.options, false);
});

onDeactivated(() => {
  window.removeEventListener("resize", onWindowResize, false);
});
</script>

<style lang="less" scoped>
.echart-view {
  width: 100%;
  height: 100%;
}
</style>
